<template>
	<view class="my">
		<view class="info">
			<view class="left">
				<view class="left_item" @click="jump(accessToken == ''? 'login' : 'user_info')">
					<text>{{userInfo.username}}</text>
                </view>
				<view class="left_item2" v-if="!userInfo.isWechat" @click="jump(accessToken == ''? 'login' : 'user_info')">
					<text>{{userInfo.mobile}}</text>
				</view>
				<view class="left_item2" v-if="!userInfo.isWechat" @click="jump(accessToken == ''? 'login' : 'user_info')">
					<text>{{userInfo.type_name}}</text>
				</view>
				<button class="wechatHead" v-if="userInfo.isWechat" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
					<image :src="obtainImgUrl('icon/icon_login_wechat.png')"></image>
					授权微信昵称头像
				</button>
			</view>
			<view class="right"  @click="jump(accessToken == ''? 'login' : 'user_info')">
				<SRV-profile :potos="userInfo.head_portrait" size="180"></SRV-profile>
			</view>
		</view>
		<view class="heng"></view>
		<view class="info2">
			<view class="item" @click="jump('cardList', 'state=1')">
				<image :src="obtainImgUrl('icon/card.png')" mode="aspectFit"></image>
				<view>卡包：<text>{{userInfo.card_num}}</text>张</view>
			</view>
			<view class="item" @click="jump('forceDetail', 'type=user_money')">
				<image :src="obtainImgUrl('icon/usermoney.png')" mode="aspectFit"></image>
				<view>余额：<text>{{userInfo.user_money}}</text>元</view>
			</view>
		</view>
		
		<view class="info3" @click="jump('my_order_list')">
			<view class="item">
				<text>我的订单</text>
			</view>
			<view class="item">
				<text>全部</text>
			</view>
		</view>
		<view class="nav">
			<view class="item" @click="jump('my_order_list', 'synthesize_status=0')">
				<view class="item_num" v-if="userInfo.orderNumList[0].num > 0">{{userInfo.orderNumList[0].num}}</view>
				<image :src="obtainImgUrl('icon/icon22.png')" mode="aspectFit"></image>
			</view>
			<view class="item" @click="jump('my_order_list', 'synthesize_status=1')">
				<view class="item_num" v-if="userInfo.orderNumList[1].num > 0">{{userInfo.orderNumList[1].num}}</view>
				<image :src="obtainImgUrl('icon/icon23.png')" mode="aspectFit"></image>
			</view>
			<view class="item" @click="jump('my_order_list', 'synthesize_status=3')">
				<view class="item_num" v-if="userInfo.orderNumList[2].num > 0">{{userInfo.orderNumList[2].num}}</view>
				<image :src="obtainImgUrl('icon/icon24.png')" mode="aspectFit"></image>
			</view>
			<view class="item" @click="jump('my_order_list', 'synthesize_status=4')">
				<image :src="obtainImgUrl('icon/icon251.png')" mode="aspectFit"></image>
			</view>
			<view class="item" @click="jump('refund_list')">
				<view class="item_num" v-if="userInfo.orderNumList[4].num > 0">{{userInfo.orderNumList[4].num}}</view>
				<image :src="obtainImgUrl('icon/icon26.png')" mode="aspectFit"></image>
			</view>
		</view>
		
        <view class="topnav"> 
            <view class="list" @click="jump('user_info', 0)">
            	<image lazy-load="true" :src="obtainImgUrl('icon/icon14.png')" mode="aspectFit"></image>
            	<text>个人资料</text>
            </view>
			<view class="list" @click="jump('message')" style="position: relative;">
				<image :src="obtainImgUrl('icon/message.png')" mode="aspectFit"></image>
				<view class="numAbsolute" v-if="userInfo.messageNum > 0">{{userInfo.messageNum}}</view>
				<text>消息中心</text>
			</view>
			<view class="list" @click="jump('cart')">
				<image :src="obtainImgUrl('icon/icon18.png')" mode="aspectFit"></image>
				<text>购物车</text>
			</view>
			<view class="list" @click="jump('address')">
				<image :src="obtainImgUrl('icon/icon15.png')" mode="aspectFit"></image>
				<text>我的地址</text>
			</view>
			<view class="list" @click="jump('collect')">
				<image :src="obtainImgUrl('icon/collect-new.png')" mode="aspectFit"></image>
				<text>我的收藏</text>
			</view>
			<view class="list" v-if="userInfo.isPromotion" @click="applyFun()">
				<image :src="obtainImgUrl('icon/team.png')" mode="aspectFit"></image>
				<text>推广中心</text>
			</view>
			<view class="list" @click="jump('agreement', 'about')">
				<image :src="obtainImgUrl('icon/aboutus.png')" mode="aspectFit"></image>
				<text>关于我们</text>
			</view>
			<view class="list" @click="jump('agreement', 'copyright')">
				<image :src="obtainImgUrl('icon/3c.png')" mode="aspectFit"></image>
				<text>版权说明</text>
			</view>
			<view class="list" v-if="accessToken != ''" @click="logout()">
				<image :src="obtainImgUrl('icon/logout.png')" mode="aspectFit"></image>
				<text>退出</text>
			</view>
        </view>
		<uni-popup ref="popup">
			<view class="show">
				<view class="title">修改基础信息</view>
				<view class="showHead">
					<image :src="editInfo.head_portrait" ></image>
				</view>
				<input type="text" placeholder="请输入修改昵称"  v-model="editInfo.username"/>
				<view class="btn">
					<text @click="closePopup()" style="color: rgba(17 17 18, 0.8)">取消</text>
					<text @click="subEdit()" style="color: #e5c407;">确认</text>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import serve from '../../static/request.js';
import storage from '../../static/appkey.js';
import common from '../../static/jump.js';
	export default {
		data() {
			return {
				accessToken: '',
				userInfo:{},
				editInfo: {
					username: '',
					head_portrait: '',
				}
			}
		},
		methods: {
			onChooseAvatar(e) {
				const avatarUrl = e.detail.avatarUrl
				this.editInfo.head_portrait = avatarUrl;
				this.$refs.popup.open();
			},
			closePopup() {
				this.$refs.popup.close();
			},
			getUserInfo(){
				serve.request({
                    url: '/member/member/index',
                    data: {}
                }).then(res => {
                    if(res.code == 200) {
                        this.userInfo = res.data;
						this.$forceUpdate();
                    } else {
                        uni.showToast({
                            title:res.message,
                            icon: 'none'
                        });
                    }
                });
			}, 
			subEdit() {
				let that = this;
				if(that.editInfo.username == '') {
					uni.showToast({
						title: "请填写用户名",
						icon: 'none',
					});
					return ;
				}
				uni.uploadFile({
					url: serve.apiUrl() + '/v1/file/images?appkey=' + uni.getStorageSync('appkey'),
					filePath: that.editInfo.head_portrait,
					name: 'file',
					formData: {
						'access-token': uni.getStorageSync('access-token'),
					},
					success: (uploadFileRes) => {
						uni.hideLoading();
						let result = JSON.parse(uploadFileRes.data);
						if (result.code == 200) {
							that.editInfo.head_portrait = result.data.imgUrl;
							serve.request({
								url: '/member/member/edit-info',
								data: this.editInfo,
							}).then(res => {
								uni.showToast({
									title: res.message,
									icon: 'none',
								});
								if(res.code == 200) {
									that.$refs.popup.close();
									that.getUserInfo();
								}
							});
						} else {
							uni.showToast({
								title: result.message,
								icon: 'none',
							})
						}
					}
				});
			},
			applyFun() {
				if(this.userInfo.applyState == 0) {
					uni.showModal({
					    title: '提示',
					    content: '您还不是推广员，无法进入推广中心',
						confirmText: '去申请',
					    success: function (res) {
							if (res.confirm) {
								common.jump('volunteer_apply');
							}
					    }
					});
					return ;
				}
				if(this.userInfo.applyState == 1) {
					common.jump('volunteer_apply');
				}
				if(this.userInfo.applyState == 9) {
					common.jump('volunteer_info');
				}
			},
			getNotReadMessageNum() {
				serve.request({
                    url: '/member/message/no-read-num',
                    data: {}
                }).then(res => {
                    this.messageNum = res.data;
                });
			},
			logout() {
				this.accessToken = "";
				uni.setStorageSync('access-token', '');
				uni.setStorageSync('is_logout', true);
				this.getUserInfo();
			},
			obtainImgUrl(imgUrl) {
				return serve.imgUrl()+imgUrl;
			},
			jump(jump_type, jump_link){
				if(jump_type !== "login" && uni.getStorageSync('access-token') == "") {
					common.jump('login');
					return ;
				}
				common.jump(jump_type, jump_link);
			}
		},
		onLoad() {
			console.log('我的');
		},
		onShow() {
			this.accessToken = uni.getStorageSync('access-token');
			this.getUserInfo();
		},
		onPullDownRefresh() {
			if (this.accessToken != '') {
				this.getUserInfo();
			}
		}
	}
</script>

<style lang="scss" scoped>
		// @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
		//     .my {
		//         padding-bottom: 164upx !important;
		//     }
		// }
	.my { 
		width: 100%; 
		padding-bottom: 50upx;

		.info {
			box-sizing: border-box;
			padding: 30upx;
			background-color: #fff;
			display: flex;
			justify-content: space-between;
			align-items: center;
			//background-color: rgba(#007AFF,0.5);

			.left {
				.left_item {
					display: flex;
					align-items: center;
					font-size: 50upx;
					font-weight: bold;

					text {
						max-width: 340upx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					image {
						width: 140upx;
						height: 40upx;
						margin-left: 13upx;
					}
				}

				.left_item2 {
					display: flex;
					align-items: center;
					font-size: 38upx;
					margin-top: 22upx;
				
					text {
						margin-left: 9upx;
						margin-right: 26upx;
						font-size: 16px;
						color: #999;
					}
				}
				.wechatHead {
					display: flex;
					align-items: center;
					padding: 0 10rpx;
					border: 1rpx solid #ff5500;
					font-size: 32rpx;
					height: 70rpx;
					margin-top: 20rpx;
					animation: myfirst 600ms infinite;
					@keyframes myfirst
					{
						0%   {border-color: #ffffff}
						100% { border-color: #ff5500; }
						// 0%   {opacity: 0.1}
						// 100% {opacity: 1}
					}
					image {
						width: 50rpx;
						height: 50rpx;
						margin-right: 10rpx;
					}
				}
				
				
			}

			.right { //箭头
				display: flex;
				position: relative;
				
				top:-30upx;
				right: 15upx;
				
				//background-color: #FF0000;
			}

			.right::before { //头像 
				position: absolute;
				left:180upx;
				//right: 0upx;
				top: 120upx;
				content: '';
				border: 1upx solid rgba(57, 72, 107, 0.5);
				border-width: 0 3upx 3upx 0;
				padding: 6upx;
				transform: rotate(-45deg);
				-webkit-transform: rotate(-45deg);
			}

		}

		.info1 {
			display: flex;
			box-sizing: border-box;
			padding: 23upx 30upx 41upx;
			background-color: #fff;
			border-bottom: 1upx rgba(57, 72, 107, 0.1) solid;

			.item:first-child {
				margin-left: 0upx;
			}

			.item {
				display: flex;
				align-items: center;
				font-size: 20upx;
				margin-left: 40upx;

				text:last-child {
					font-size: 28upx;
					font-weight: bold;
					color: #2C405A;
					margin-left: 10upx;
				}
			}
		}

		.info2 {
			display: flex;
			box-sizing: border-box;
			padding: 40upx 80upx;
			justify-content: space-between;
			border-bottom: 16upx #FBFBFD solid;

			.item {
				display: flex;
				align-items: center;
				font-size: 28upx;
				text {
					font-size: 36rpx;
					color: red;
					padding: 0 10rpx;
				}
				
				image {
					width: 36upx;
					height: 36upx;
					margin-right: 12upx;
				}

			}
		}

		.heng {
			height: 16upx;
			width: 100%;
			background: #FBFBFD;
		}

		.info3 {
			display: flex;
			box-sizing: border-box;
			padding: 37upx 30upx 37upx 0upx;
			border-bottom: 1upx rgba(53, 63, 110, 0.06) solid;
			margin-left: 30upx;
			justify-content: space-between;

			.item:last-child {
				position: relative;
				font-weight: 400;
				padding-right: 25upx;
			}

			.item:last-child:after {
				position: absolute;
				right: 0upx;
				top: 13upx;
				content: '';
				border: 1upx solid rgba(57, 72, 107, 0.5);
				border-width: 0 3upx 3upx 0;
				padding: 6upx;
				transform: rotate(-45deg);
				-webkit-transform: rotate(-45deg);
			}

			.item {
				font-size: 28upx;
				font-weight: bold;
			}
		}

		.nav {
			display: flex;
			box-sizing: border-box;
			padding: 50upx 39upx;
			border-bottom: 16upx #F9FAFC solid;
			justify-content: space-between;

			.item {
				position: relative;
				image {
					width: 106upx;
					height: 87upx;
				}
				
			
			
				.item_num{
					
					width: 20upx;
					height:20upx;
					padding:5upx;
					
					top: -10upx;
					right: 20upx;
					position: absolute;
					z-index: 10;
					
					color: #FFF;
					font-size: 18upx;
					
					background:rgba(235,89,56,1);
					border-radius:15upx;
					display: flex;
					justify-content: center;
					align-items: center;
					
				}

			}
		}

		.bot {
			text-align: center;
			padding: 10upx 0upx;
			font-size: 32upx;
			margin-top: 60upx;
		}
		
		.botv {
			text-align: center;
			color: #DDDDDD;
			margin-top: 100upx;
			padding: 10upx 0upx;
			font-size: 22upx;
		}
		.numAbsolute {
			position: absolute;
			top: 22rpx;
			right: 80rpx;
			border: 1rpx solid #ff0000;
			background-color: #ff0000;
			color: #ffffff;
			border-radius: 50%;
			width: 30rpx;
			height: 30rpx;
			line-height: 30rpx;
			text-align: center;
			font-size: 26rpx;
		}
		.line {
			position: relative;
			display: flex;
			box-sizing: border-box;
			padding: 45upx 33upx 38upx;
			align-items: center;
			font-size: 28upx;
			border-bottom: 1upx rgba(53, 63, 110, 0.06) solid;

			image {
				height: 50upx;
				width: 50upx;
				margin-right: 30upx;
			}
			
			.mad_num{
				height:24upx;
				padding: 2upx 15upx;
				
				position: relative;
				top: -20upx;
				right: 0upx;
				
				z-index: 10;
				
				color: #FFF;
				font-size: 20upx;
				
				background:rgba(87, 188, 199, 1.0);
				border-radius:13upx;
				
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}

		.line::after {
			position: absolute;
			right: 33upx;
			top: 65upx;
			content: '';
			border: 1upx solid rgba(57, 72, 107, 0.5);
			border-width: 0 3upx 3upx 0;
			padding: 6upx;
			transform: rotate(-45deg);
			-webkit-transform: rotate(-45deg);
		}
        
        	
        .topnav {
        	display: flex;
        	box-sizing: border-box;
        	flex-wrap: wrap;
        	width: 100%;
			padding: 1%;
			//border: #cc0000 1upx dashed;
        	.navTitle {
        		padding: 30rpx;width: 100%;font-size: 36rpx;
        	}
        	.list {
        		width: calc(33% - 40upx);
				display: flex;
        		flex-direction: column;
        		justify-content: center;
        		align-items: center;
        		
        		
				//border: #23345B 1upx dashed;
        		padding: 30upx 20upx;
        		image {
        			width: 60upx;
        			height: 60upx;
        			margin-bottom: 20upx;
        		}
				
				text{
					height: 30upx;
					overflow: hidden;
					color: #23345B;
					font-size: 24upx;
					text-align: center;
				}
                
                .item_num{
                    width:10upx;
                    height:10upx;
					padding: 5upx;
					
					position: absolute;
					z-index: 10;
					top: 20upx;
                    right: 70upx;
                	
                	border-radius:50%;
                	color: rgba(235,89,56,1);
                	font-size: 18upx; 
                	background:rgba(235,89,56,1);
                	
					display: flex;
                	justify-content: center;
                	align-items: center;
                	
                }
                .showNum{
                	width:30upx;
                	height:30upx;
					right: 60upx;
                	color: rgba(255, 255, 255, 1.0);
                }
        	}
        }
		
		.show{
			width: 80vw;
			background: #FFFFFF;
			border-radius: 20rpx;
			.title{
				text-align: center;
				font-size: 32rpx;
				height: 80rpx;
				line-height: 80rpx;
				border-bottom: 1rpx rgba(60, 72, 104, 0.05) solid;
			}
			.showHead {
				text-align: center;
				padding: 20rpx;
				image {
					width: 150rpx;
					height: 150rpx;
				}
			}
			input{
				padding: 20rpx 30rpx;
				margin: 0 20rpx 30rpx 20rpx;
				border: 1px solid #333;
			}
			
			.btn{
				font-size: 36rpx;
				padding: 0rpx 90rpx 20rpx;
				display: flex;
				justify-content: space-between;
			}
		}
	}
</style>
